<template>
  <div class="payment-page">
    <div class="header">
      <div class="header-content d-flex justify-content-between align-items-center">
        <h2>合同支付</h2>
        <button @click="goBack" class="btn btn-secondary">
          <i class="fa fa-arrow-left mr-2"></i>返回
        </button>
      </div>
    </div>

    <div class="card mt-4">
      <div class="card-body">
        <div class="payment-info">
          <h3>支付信息</h3>
          <p><strong>合同ID:</strong> {{ contractId }}</p>
          <p><strong>支付类型:</strong> {{ paymentTypeText }}</p>

          <!-- 金额输入表单 -->
          <div class="form-group mt-3">
            <label for="paymentAmount">支付金额 (元)</label>
            <input
              type="number"
              id="paymentAmount"
              v-model="paymentAmount"
              min="0.01"
              step="0.01"
              class="form-control"
            >
          </div>

          <button
            @click="generateQrcode"
            class="btn btn-primary w-100 mt-3"
            :disabled="!paymentAmount || paymentAmount <= 0"
          >
            生成支付二维码
          </button>
        </div>

        <!-- 二维码区域 (支付金额确认后显示) -->
        <div v-if="showQrcode" class="qrcode-area mt-4 text-center">
          <h4>请使用支付宝扫描支付</h4>
          <div class="qrcode-container p-3">
            <!-- 沙箱环境使用占位图，真实环境应调用支付宝API生成 -->
            <img
              src="https://picsum.photos/200/200?random=1"
              alt="支付宝支付二维码"
              class="qrcode-image"
            >
            <p class="mt-2">支付金额: {{ paymentAmount }} 元</p>
          </div>

          <button
            @click="simulatePaymentSuccess"
            class="btn btn-success w-100 mt-4"
          >
            <i class="fa fa-check mr-2"></i>模拟支付成功
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'PaymentPage',
  setup() {
    const route = useRoute()
    const router = useRouter()

    // 从路由参数获取合同信息
    const contractId = ref(route.params.contractId || '')
    const paymentType = ref(route.params.paymentType || '') // 'deposit' 或 'execution'
    const paymentAmount = ref('')
    const showQrcode = ref(false)

    // 支付类型文本映射
    const paymentTypeText = ref('')

    // 初始化
    onMounted(() => {
      if (!contractId.value || !paymentType.value) {
        alert('缺少必要参数')
        router.push('/customer/ongoing-contracts')
        return
      }

      // 设置支付类型文本
      if (paymentType.value === 'deposit') {
        paymentTypeText.value = '定金支付'
      } else if (paymentType.value === 'execution') {
        paymentTypeText.value = '执行款支付'
      }
    })

    // 生成二维码
    const generateQrcode = () => {
      if (!paymentAmount.value || parseFloat(paymentAmount.value) <= 0) {
        alert('请输入有效金额')
        return
      }

      showQrcode.value = true
    }

    // 模拟支付成功
    const simulatePaymentSuccess = () => {
      // 在真实环境中，这里应该调用后端接口验证支付状态
      alert(`支付 ${paymentAmount.value} 元成功！`)

      // 返回合同详情页并刷新
      router.push({
        name: 'CustomerContractProgressDetail',
        params: { contractId: contractId.value }
      })
    }

    // 返回
    const goBack = () => {
      router.back()
    }

    return {
      contractId,
      paymentType,
      paymentTypeText,
      paymentAmount,
      showQrcode,
      generateQrcode,
      simulatePaymentSuccess,
      goBack
    }
  }
}
</script>

<style scoped>
.header {
  background-color: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #dee2e6;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.qrcode-container {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: inline-block;
  margin-top: 15px;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
}
</style>